昨天完成了點擊互動的目錄，不過選單直接出現有些突兀，所以今天給選單加上一個滑入動畫。

#click-menu:checked ~ * .list {
  animation: Slidein 0.93s ease-in-out 0s 1 alternate forwards;
}

@keyframes Slidein{
  0%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-100%);
  }
}

選單消失時同理，把動畫反向撥放。

#click-menu:not(:checked) ~ * .list {
  animation: Slidein 0.93s ease-in-out 0s 1 alternate-reverse forwards;
}

但這時卻發現，不只消失時的動畫沒有成功撥放，原本的滑入動畫也失效了。
底下是ChatGPT給出的回答：

這時定義一個新的keyframes來解決。

#click-menu:not(:checked) ~ * .list {
  animation: Slideout 0.93s ease-in-out 0s 1 alternate forwards;
}

@keyframes Slideout{
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(0%);
  }
}

參考資料/延伸閱讀

1. MDN-animations
2. medium